import {defineComponent, onMounted, ref} from 'vue'
import dayjs from "dayjs"
import "./index.scss"

export default defineComponent({
    name: 'layout-header',
    setup() {
        const dateTable = ref({
            date: '',
            time: '',
            weather: '🌤 26℃',
            week: '',
        })
        const updateDateTableHandle = () => {
            const date = new Date()
            dateTable.value.date = dayjs(date).format('YYYY-MM-DD')
            dateTable.value.time = dayjs(date).format('HH:MM:ss')
            dateTable.value.week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()]
        }
        onMounted(() => {
            updateDateTableHandle()
            setInterval(updateDateTableHandle, 1000)
        })
        return () => (
            <header class={'layout-header__wrapper'}>
                <nav class={'layout-header__nav flex-row__center'}>
                    <div>首页</div>
                    <div>防汛</div>
                    <div>用户管理</div>
                    <div>系统设置</div>
                </nav>
                <h1 class={'layout-header__title'}>应急响应系统</h1>
                <div class="layout-header__profile flex-row__center">
                    {
                        Object.values(dateTable.value).map((value, index, array) => {
                            return (<span>{value}</span>)
                        })
                    }
                    <span>M</span>
                </div>
            </header>
        )
    },
})
